<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-01-21 09:57:41
-->
<template>
    <div class="middlebox">
        <div class="title-h">
            <div>
                <img src="@/assets/img/dashboard/装饰_.png" alt="">
                设备运行监控
            </div>
            <img src="@/assets/img/dashboard/边角.png" alt="">
        </div>
        <div class="operation-box">
            <div class="operation-list" v-for="item,index in shebeiData" :key="index">
                <div class="operation-list-top">
                    <img :src="item.img" alt="">
                    {{item.name}}
                </div>
                <div class="operation-list-bottom" @click="onState(item.state)">
                    <div class="bg-color" :style="{'color':item.name == '运行正常'? '#37FF00'
                    :item.name == '运行异常' ? '#FFFF00'
                    :item.name == '故障' ? ' #FF4242':'#fff' }">{{item.shuzi}}</div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            shebeiData:[
                {
                    shuzi:'00',
                    name:'总设备数',
                    state:0,
                    img:require('../../assets/img/dashboard/总设备数.png')
                },
                {
                    shuzi:'00',
                    name:'运行正常',
                    state:1,
                    img:require('../../assets/img/dashboard/运行正常.png')
                },
                {
                    shuzi:'00',
                    name:'运行异常',
                    state:2,
                    img:require('../../assets/img/dashboard/运行异常.png')
                },
                {
                    shuzi:'00',
                    name:'故障',
                    state:3,
                    img:require('../../assets/img/dashboard/故障.png')
                },
            ],
        }
    },
    watch: {
        data: {
            handler(val) {
                this.renderData(val)
            },
            deep:true
        }
    },
    mounted() {
        this.renderData(this.data)
    },
    unmounted() {

    },
    methods: {
       renderData(val){
           this.shebeiData[0].shuzi = val.sum
           this.shebeiData[1].shuzi = val.normal
           this.shebeiData[2].shuzi = val.anomalouts
           this.shebeiData[3].shuzi = val.warns
       },
       onState(val){
           this.$emit('onState', val)
       }
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    // padding: 7% 20px;
    box-sizing: border-box;
    .operation-box {
        background-color: rgba(0, 50, 76, 0.85);
        margin-top: 10px;
        height: calc(100% - 60px);
        display: flex;
        flex-flow: wrap;
        width: 100%;
        align-content: space-around;
        justify-content: space-around;
        .operation-list {
            display: flex;
            flex-flow: column;
            width: 40%;
            // height: 45%;
            .operation-list-top {
                display: flex;
                align-items: center;
                height: 30px;
                img {
                    margin-right: 5px;
                }
            }
            .operation-list-bottom {
                cursor: pointer;
                position: relative;
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(1, 65, 90, 0.2);
                box-shadow: -2px 0px 0px 0px #00B7D4;
                .bg-color {
                    position: absolute;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 40px;
                    width: 100%;
                    height: 40px;
                    left: 50%;
                    top: 50%;
                    background-color: #01415A;
                    transform: translate(-50%,-50%);

                }
            }
        }
    }
}
</style>